<template>
<div class="all">
<!-- 只要在el-table元素中定义了height属性，即可实现固定表头的表格，而不需要额外的代码。 -->
<div class="up">
   <div class="puser">
    <h4>普通用户管理</h4>
   </div>
  <el-table
    :data="tableData.filter(data => !searcher || data.accName.toLowerCase().includes(searcher.toLowerCase()))"
    style="width: 928px">

 <el-table-column
     fixed
      label="账号id"
      prop="id">
    </el-table-column>

   <el-table-column
      label="用户昵称"
      prop="accName">
    </el-table-column>

  <el-table-column
        width="100"
        label="用户密码"
        prop="pass">
      </el-table-column>

 <el-table-column

        label="钱包余额"
        prop="purse">
      </el-table-column>

    <el-table-column
        label="真实姓名"
        prop="realName">
      </el-table-column>

      <el-table-column
        width="120"
        label="电话号码"
        prop="phone">
      </el-table-column>

      <el-table-column

        label="性别"
        prop="sex">
      </el-table-column>

    <el-table-column
      label="账号创建时间"
      prop="registerTime"
      width="120px">
       <template slot-scope="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.registerTime }}</span>
     </template>
     </el-table-column>

     <el-table-column
      label="账号状态"
      prop="state">
      <template scope="scope">

      <el-switch
        v-model="scope.row.state"
        active-color="#13ce66"
        inactive-color="#ff4949"
        active-value="0"
        inactive-value="1"
        @change=changeUstate(scope.$index,scope.row)>
      </el-switch>

      </template>
    </el-table-column>

    <el-table-column
      fixed="right"
       width="200">
      <template slot="header" slot-scope="scope">
        <el-input
          v-model="searcher"
          size="mini"
          placeholder="输入用户昵称搜索"/>{{scope.row}}
      </template>
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdituser(scope.$index, scope.row)">Edit</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDeleteuser(scope.row.id)">Delete</el-button>
      </template>

    </el-table-column>
  </el-table>
  <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pagenum"
      :page-sizes="[4]"
      :page-size="4"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
  </div>

  <div class="down">
   <div>
    <h4>店铺管理</h4>
   </div>
  <el-table
    :data="shopData.filter(dat => !search || dat.shopName.toLowerCase().includes(search.toLowerCase()))"
    style="width: 928px">
  <!-- 商家列表 -->
 <el-table-column
     fixed
      label="店铺id"
      prop="id">
    </el-table-column>

     <el-table-column
      label="店铺名"
      prop="shopName">
    </el-table-column>
  <el-table-column
      label="经营类型"
      prop="shopType">

    </el-table-column>
   <el-table-column
      label="用户昵称"
      prop="accName">
    </el-table-column>

     <el-table-column
        label="电话号码"
        width="120"
        prop="phone">
      </el-table-column>

       <el-table-column
        label="注册资金"
        prop="registerMoney">
      </el-table-column>

     <el-table-column
      label="账号状态"
      prop="state">
      <template scope="scope">

      <el-switch
        v-model="scope.row.value"
        active-color="#13ce66"
        inactive-color="#ff4949"
        active-value= '0'
        inactive-value= '1'
        @change=change(scope.$index,scope.row)>
      </el-switch>

      </template>
    </el-table-column>

    <el-table-column
      fixed="right"
       width="200">
      <template slot="header" slot-scope="scope">
        <el-input
          v-model="search"
          size="mini"
          placeholder="输入店铺名搜索"/>{{scope.row}}
      </template>
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.row)">Delete</el-button>
      </template>

    </el-table-column>
  </el-table>
  <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pagenum"
      :page-sizes="[4]"
      :page-size="4"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalshop">
    </el-pagination>
  </div>
  </div>
  <el-dialog title="修改普通用户" :visible.sync="dialogEdituser" width="40%" :modal="false">
      <el-form label-position="left" label-width="100px">
        <el-form-item label="用户昵称:">
          <el-input v-model="editInfo.accName" prefix-icon="el-icon-s-custom" class="login-subject-input" disabled
           ></el-input>
        </el-form-item>
   <el-form-item label="用户密码:">
                  <el-input v-model="editInfo.pass" prefix-icon="el-icon-mobile-phone" class="login-subject-input"
                    placeholder="请输入密码"></el-input>
                </el-form-item>
        <el-form-item label="电话号码:">
          <el-input v-model="editInfo.phone" prefix-icon="el-icon-mobile-phone" class="login-subject-input"
            placeholder="请输入电话号码"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveEdit()">保存</el-button>
      </span>
    </el-dialog>

     <el-dialog title="修改店铺" :visible.sync="dialogEdit" width="40%" :modal="false">
      <el-form label-position="left" label-width="100px">
         <el-form-item label="店铺名:">
          <el-input v-model="info.shopName" prefix-icon="el-icon-s-custom" class="login-subject-input" disabled
           ></el-input>
        </el-form-item>
         <el-form-item label="经营类型" prop="type">
          <el-cascader :options="options" v-model="info.type" clearable @change="handleChange"></el-cascader>
          </el-form-item>
        <el-form-item label="用户昵称:">
          <el-input v-model="info.accName" prefix-icon="el-icon-s-custom" class="login-subject-input" disabled
           ></el-input>
        </el-form-item>
        <el-form-item label="电话号码:">
          <el-input v-model="info.phone" prefix-icon="el-icon-mobile-phone" class="login-subject-input"
            placeholder="请输入电话号码"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="save()">保存</el-button>
      </span>
    </el-dialog>
</div>
</template>

<script>
import { selectShop, updateShopInfo, editShop, delShop } from '../../api/shop'
import { editShang, getSomeUser, editUserbyadmin, deleteUser } from '../../api/user'
export default {
  data () {
    return {
      dialogEdituser: false,
      dialogEdit: false,
      editInfo: {
        id: 0,
        accName: '',
        pass: '',
        phone: ''
      },
      info: {
        shopName: '',
        type: '',
        accName: '',
        phone: '',
        shopid: ''
      },
      rowIndex: null,
      // 获取用户列表
      queryInfo: {
        query: '',
        // 当前页数
        pagenum: 1
      },
      options: [{
        value: '1',
        label: '旗舰店'
      }, {
        value: '2',
        label: '专营店'
      }, {
        value: '3',
        label: '卖场店'
      }
      ],
      total: 0,
      totalshop: 0,
      tableData: [],
      shopData: [],
      search: '',
      searcher: '',
      currentPage4: 4
      // shopType: '' // 商家类型
    }
  },
  created () {
    this.getShop()
    this.getUser()
  },
  methods: {
    getUser () {
      const params = {
        key: '3'
      }
      getSomeUser(params).then(res => {
        this.tableData = res.data.data
        console.log(this.tableData)
        this.tableData.forEach((item, index) => {
          item.state = item.state + ''
        })
        this.total = this.tableData.length
      })
    },
    // 获取店铺
    getShop () {
      selectShop().then(res => {
        // console.log(res.data.data)
        const result = res.data.data
        const [{ type }] = result
        console.log(type)
        this.shopData = [...result]
        console.log(this.shopData)
        this.shopData.forEach((item, index) => {
          if (item.type === 1) {
            item.shopType = '旗舰店'
          } else if (item.type === 2) {
            item.shopType = '专营店'
          } else {
            item.shopType = '卖场店'
          }
          item.value = item.state + ''
        })
        this.totalshop = this.shopData.length
      })
    },
    // 删除店铺操作
    handleDelete (row) {
      delShop(row.id).then(res => {
        console.log(res)
        this.getShop()
      }).catch(err => {
        console.log(err)
        this.$message.error('删除失败')
      })
    },

    // 获取编辑行数据
    handleEdit (index, row) {
      this.dialogEdit = true
      this.info = row
      this.rowIndex = index
      this.info.shopid = row.id
      console.log(row.value)
    },
    handleChange (value) {
      this.info.type = value
    },
    save () {
      const data = {
        id: this.info.shopid,
        type: this.info.type[0]
      }
      const da = {
        shopId: this.info.shopid,
        phone: this.info.phone
      }
      editShop(data).then(res => {
        console.log(res)
      })
      editShang(da).then(res => {
        console.log(res.data)
      })
      this.getShop()
      this.dialogEdit = false
    },
    handleEdituser (index, row) {
      console.log(index, row)
      this.dialogEdituser = true
      this.editInfo = row
      this.rowIndex = index
      this.userpid = row.id
    },
    // 删除用户操作
    handleDeleteuser (id) {
      console.log(id)
      deleteUser(id).then(res => {
        if (res.data.meta.status === 200) {
          this.$message({
            message: res.data.meta.msg,
            type: 'success'
          })
        } else {
          this.$message({
            message: res.data.meta.msg,
            type: 'warning'
          })
        }
      })
      this.getUser()
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.queryInfo.pagenum = val
      // this.getgetTableData()
    },
    // 更改店铺状态
    change (index, row) {
      const data = {
        id: row.id,
        state: row.value
      }
      console.log(row)
      updateShopInfo(data).then(res => {
        console.log(res)
        this.getShop()
        return this.$message({
          message: '更新用户状态成功',
          type: 'success'
        })
      })
    },
    // 修改用户信息
    saveEdit () {
      const data = {
        id: this.editInfo.id,
        pass: this.editInfo.pass,
        phone: this.editInfo.phone
      }
      editUserbyadmin(data).then(res => {
        if (res.data.meta.status === 200) {
          this.$message({
            message: res.data.meta.msg,
            type: 'success'
          })
        } else {
          this.$message({
            message: res.data.meta.msg,
            type: 'warning'
          })
        }
      })
      this.getUser()
      this.dialogEdituser = false
    },
    // 更改用户状态
    changeUstate (index, row) {
      // eslint-disable-next-line no-unused-vars
      const data = {
        id: row.id,
        state: row.state
      }
      console.log(row.state)
      editUserbyadmin(data).then(res => {
        if (res.data.meta.status === 200) {
          this.$message({
            message: res.data.meta.msg,
            type: 'success'
          })
          this.getUser()
        } else {
          this.$message({
            message: res.data.meta.msg,
            type: 'warning'
          })
        }
      })
    }

  }
}
</script>
